<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Galleria <span>FullScreen</span></h1>
        <p>In fullscreen mode content covers the whole page over a mask..</p>
    </div>
    <app-demoActions github="galleria"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>With Thumbnails</h5>
        <button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayBasic = true"></button>
        <p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions2" [containerStyle]="{'max-width': '50%'}" [numVisible]="9"
            [circular]="true" [fullScreen]="true" [showItemNavigators]="true">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" style="display: block;"/>
                </div>
            </ng-template>
        </p-galleria>
    </div>

    <div class="card">
        <h5>Without Thumbnails</h5>
        <button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayBasic2 = true"></button>
        <p-galleria [(value)]="images" [(visible)]="displayBasic2" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '850px'}" [numVisible]="7"
            [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" style="display: block;"/>
                </div>
            </ng-template>
        </p-galleria>
    </div>

    <div class="card">
        <h5>Custom Contents</h5>
        <div *ngIf="images" class="grid" style="max-width: 400px;">
            <div *ngFor="let image of images; let index = index;" class="col-3" key="index">
                <img [src]="image.thumbnailImageSrc" [alt]="image.alt" style="cursor: pointer" (click)="imageClick(index)"/>
            </div>
        </div>
        <p-galleria [(value)]="images" [(visible)]="displayCustom" [(activeIndex)]="activeIndex" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '850px'}" [numVisible]="7"
            [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false">
            <ng-template pTemplate="item" let-item>
                <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>
            </ng-template>
            <ng-template pTemplate="thumbnail" let-item>
                <div class="grid grid-nogutter justify-content-center">
                    <img [src]="item.thumbnailImageSrc" style="display: block;"/>
                </div>
            </ng-template>
        </p-galleria>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="galleriafullscreendemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriafullscreendemo.ts" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class GalleriaFullscreenDemo implements OnInit &#123;
    images: any[];

    responsiveOptions:any[] = [
        &#123;
            breakpoint: '1024px',
            numVisible: 5
        &#125;,
        &#123;
            breakpoint: '768px',
            numVisible: 3
        &#125;,
        &#123;
            breakpoint: '560px',
            numVisible: 1
        &#125;
    ];

    responsiveOptions2:any[] = [
        &#123;
            breakpoint: '1500px',
            numVisible: 5
        &#125;,
        &#123;
            breakpoint: '1024px',
            numVisible: 3
        &#125;,
        &#123;
            breakpoint: '768px',
            numVisible: 2
        &#125;,
        &#123;
            breakpoint: '560px',
            numVisible: 1
        &#125;
    ];

    displayBasic: boolean;

    displayBasic2: boolean;

    displayCustom: boolean;

    activeIndex: number = 0;

    constructor(private photoService: PhotoService) &#123; &#125;

    ngOnInit() &#123;
        this.photoService.getImages().then(images =>&#123;
            this.images = images
        &#125;)
    &#125;

    imageClick(index: number) &#123;
        this.activeIndex = index;
        this.displayCustom = true;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="galleriafullscreendemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriafullscreendemo.html" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions2" [containerStyle]="&#123;'max-width': '50%'&#125;" [numVisible]="9"
    [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [baseZIndex]="100000"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;"/&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" style="display: block;"/&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayBasic = true"&gt;&lt;/button&gt;
&lt;h5&gt;Without Thumbnails&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [(visible)]="displayBasic2" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '850px'&#125;" [numVisible]="7"
    [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false" [baseZIndex]="100000"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;"/&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" style="display: block;"/&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayBasic2 = true"&gt;&lt;/button&gt;
&lt;h5&gt;Custom Contents&lt;/h5&gt;
&lt;p-galleria [(value)]="images" [(visible)]="displayCustom" [(activeIndex)]="activeIndex" [responsiveOptions]="responsiveOptions" [containerStyle]="&#123;'max-width': '850px'&#125;" [numVisible]="7"
    [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false" [baseZIndex]="100000"&gt;
    &lt;ng-template pTemplate="item" let-item&gt;
        &lt;img [src]="item.previewImageSrc" style="width: 100%; display: block;"/&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="thumbnail" let-item&gt;
        &lt;div class="grid grid-nogutter justify-content-center"&gt;
            &lt;img [src]="item.thumbnailImageSrc" style="display: block;"/&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-galleria&gt;
&lt;div *ngIf="images" class="grid" style="max-width: 400px;"&gt;
    &lt;div *ngFor="let image of images; let index = index;" class="col-3" key="index"&gt;
        &lt;img [src]="image.thumbnailImageSrc" [alt]="image.alt" style="cursor: pointer" (click)="imageClick(index)"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

        </p-tabPanel>
    </p-tabView>
</div>

